<template>
  <div>
    <!--  搜索图书弹窗  -->
    <el-dialog title="搜索图书" width="1000px" :visible.sync="searchBookDialogVisible" append-to-body @opened="openedSearchBookDialog">
      <el-row>
        <el-col :span="8" :style="{height: (CONST.WORKSPACE_HEIGHT - 200) + 'px', overflow: 'auto'}">
          <el-tree :data="bookCategoryTree"
                   node-key="id"
                   highlight-current
                   :default-expanded-keys="['']"
                   :props="{children: 'children',
                            label: 'name'}"
                   :expand-on-click-node="false" @node-click="node => this.bookCategoryParam = node.id">
          </el-tree>
        </el-col>

        <el-col :span="16">
          <el-input v-model="bookNameParam" placeholder="请输入图书名称"></el-input>

          <el-table ref="searchBookTable" :data="filteredBookList" border style="width: 100%;" stripe :height="CONST.WORKSPACE_HEIGHT - 240"
                    row-key="id"
                    @selection-change="val => this.selectedBookList = val">
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="40" align="center">
            </el-table-column>
            <el-table-column label="图书名称" min-width="200" prop="name">
              <template slot-scope="scope">
                <span v-html="scope.row.name"></span>
              </template>
            </el-table-column>
            <el-table-column label="书号" min-width="100" prop="isbn"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="searchBookDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="updateBookIdArray">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="数据权限" :visible.sync="visible" width="1000px" @open="openDialog" @close="closeDialog">
      <el-row v-if="UTIL.isNotEmpty(userName)" style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">用户</span>
        </el-col>
        <el-col :span="20">
          <el-input v-model="userName" readonly/>
        </el-col>
      </el-row>
      <el-row v-if="UTIL.isNotEmpty(roleName)" style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">角色</span>
        </el-col>
        <el-col :span="20">
          <el-input v-model="roleName" readonly/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">图书权限</span>
        </el-col>
        <el-col :span="20">
          <el-row style="margin-top: 5px; ">
            <el-col :span="4">
              <span class="label">图书列表</span>
            </el-col>
            <el-col :span="16">
              <el-select multiple filterable v-model="dataPermission.bookIdArray" size="small" style="width: 100%">
                <el-option
                  v-for="item in bookList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" >
              <el-button style="float: right" size="small" @click="searchBookDialogVisible = true">搜索图书</el-button>
            </el-col>
          </el-row>

          <el-row style="margin-top: 5px; ">
            <el-col :span="4">
              <span class="label">分类列表</span>
            </el-col>
            <el-col :span="20">
              <el-cascader :options="bookTagTree"
                           :props="{value: 'id',
                                    label: 'name',
                                    multiple: true,
                                    emitPath: false,
                                    checkStrictly: true}"
                           v-model="dataPermission.bookCategoryArray"
                           filterable style="width: 100%"></el-cascader>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">期刊权限</span>
        </el-col>
        <el-col :span="20">

          <el-cascader :options="journalList"
                       :props="{emitPath: false,
                                value: 'id',
                                label: 'name',
                                multiple: true,}"
                       v-model="dataPermission.journalIdArray"
                       filterable style="width: 100%"></el-cascader>
        </el-col>
      </el-row>

      <el-row style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">知识条目查看权限</span>
        </el-col>
        <el-col :span="20">
          <el-select multiple filterable v-model="dataPermission.knowledgeLibIdArray"
                     size="small" style="width: 100%">
            <el-option
              v-for="item in knowledgeLibList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">知识条目编辑权限</span>
        </el-col>
        <el-col :span="20">
          <el-select multiple filterable v-model="dataPermission.editKnowledgeLibIdArray" size="small" style="width: 100%">
            <el-option
              v-for="item in knowledgeLibList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row style="margin-top: 5px">
        <el-col :span="4">
          <span class="label">知识条目推送权限</span>
        </el-col>
        <el-col :span="20">
          <el-select multiple filterable v-model="dataPermission.pushKnowledgeLibIdArray" size="small" style="width: 100%">
            <el-option
              v-for="item in knowledgeLibList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="saveDataPermission">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "DataPermissionDialog",
    props: {
      userName: {
        type: String,
      },
      roleId: {
        type: String,
      },
      roleName: {
        type: String,
      }
    },
    data() {
      return {
        bookNameParam: '',
        bookCategoryParam: '',
        searchBookDialogVisible: false,
        visible: false,
        bookList: [],
        journalList: [],
        dataPermission: {
          knowledgeLibIdArray: [],
        },
        selectedBookList: [],
        bookTagTree: [],
      }
    },
    computed: {
      ...mapState(['knowledgeLibList']),
      bookCategoryTree() {
        return [{
          id: '',
          name: '全部图书 (' + this.bookList.length + ")",
          children: this.bookTagTree,
        }]
      },
      filteredBookList() {
        return this.bookList.filter(book => book.name.indexOf(this.bookNameParam) !== -1)
          .filter(book => {
            if (this.bookCategoryParam) {
              return book.category.indexOf(this.bookCategoryParam) !== -1
            }
            return true
          })
      }
    },
    methods: {
      updateBookIdArray() {
        this.dataPermission.bookIdArray = this.selectedBookList.map(item => item.id)
        this.searchBookDialogVisible = false
      },
      openedSearchBookDialog() {
        this.$refs.searchBookTable.clearSelection()
        this.selectedBookList = this.bookList.filter(item => this.dataPermission.bookIdArray.indexOf(item.id) !== -1)
        this.$nextTick(()=>{
          this.selectedBookList.forEach(item => this.$refs.searchBookTable.toggleRowSelection(item, true))
        })
      },
      openDialog() {
        this.axios.get('/pmph/action/dataPermission/selectDataPermission', {
          params: {
            userName: this.userName,
            roleId: this.roleId
          }
        }).then((resp) => {
          this.dataPermission = resp.data
        })
        // 获取图书列表;
        if (this.bookList.length === 0) {
          this.axios.get('/pmph/action/book/selectBookList')
            .then((resp) => {
              this.bookList = resp.data
            })
        }
        // 获取图书分类列表;
        if (this.bookTagTree.length === 0) {
          this.axios.get('/pmph/action/book/selectBookCategoryCascaderOptions')
            .then((resp) => {
              this.bookTagTree = resp.data
            })
        }
        // 获取期刊列表;
        if (this.journalList.length === 0) {
          this.axios.get('/pmph/action/journal/selectJournalCascaderOptions')
            .then((response) => {
              this.journalList = response.data
            })
        }
      },
      closeDialog() {
        this.visible = false
      },
      saveDataPermission() {
        this.axios.post('/pmph/action/dataPermission/saveDataPermission', this.dataPermission)
          .then(() => {
            this.visible = false
          })
      },
    }
  }
</script>

<style scoped>
/deep/ .el-dialog__body{
  padding: 0px 20px;
}
/deep/ .el-tree-node__content{
  display: block!important;
}
/deep/ .el-tree-node__children{
  overflow: visible!important;
}
</style>
